import { Box, Center,Text, Tabs,TabList,Stack,Tab,TabPanels,TabPanel  } from "@chakra-ui/react";
import SignIn from "./components/SignIn"
import SignUp from "./components/SignUp"

export default function App() {
  return (
    <Box 
      w='400px' 
      h="100vh"
      display="flex"
      alignItems="center"
      margin="0 auto">
        <Center
          w='400px'
          margin="0 auto"
          p="50px 50px 30px"
          bg="#fff"
          borderRadius="4px"
          boxShadow="0 0 8px rgba(0,0,0,.1)"
          verticalAlign="middle"
        >
        <Tabs align="center" w="100%">
        <TabList mb="50px">
          <Stack direction="horization" align="center">
            <Tab color="#969696" fontSize="18px" _hover={{ borderBottom:'2px solid #ea6f5a'}} _focus={{shadow:'none'}} _active={{bg:'none'}}>登录</Tab>
            <Text color="#969696">·</Text>
            <Tab color="#969696" fontSize="18px" _hover={{ borderBottom:'2px solid #ea6f5a'}} _focus={{shadow:'none'}} _active={{bg:'none'}}>注册</Tab>
          </Stack>
        </TabList>
        <TabPanels>
          <TabPanel p="0">
            <SignIn/>
          </TabPanel>
          <TabPanel p="0">
          <SignUp/>
          </TabPanel>
        </TabPanels>
      </Tabs>
        </Center>
    </Box>
  );
}

